fixed homepage layout when quick-access is on/visible#2346
fixed homepage layout when quick-access is on/visible#2346rohitratannagar wants to merge 4 commits intoredhat-developer:mainfrom
Conversation
Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
rohitratannagar
requested review from
a team,
Eswaraiahsapram and
christoph-jerolimov
as code owners
Changed Packages
|
Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
|
Thank you @rohitratannagar for this improvement, this looks so much better! |
Eswaraiahsapram
left a comment
Eswaraiahsapram
left a comment
There was a problem hiding this comment.
Thanks @rohitratannagar 🎉 ,
I added a few comments. PTAL
| }, | ||
|
|
||
| '@container (min-width: 1300px)': { | ||
| width: '20%', |
There was a problem hiding this comment.
If we set each card’s width to 20%, four cards will only occupy 80% of the container. Because of this, there’s unused space on the right side when the screen width is larger than 1300px.
| }, | ||
|
|
||
| '@container (min-width: 1200px)': { | ||
| width: '25%', |
There was a problem hiding this comment.
Here, the width should be dynamic. When the entity image card is closed, we display four cards; when it’s open, we display three cards including the image card. So the width should adjust based on whether the entity image card is shown or hidden. With the current implementation, there’s empty space on the right side (refer attachment), which isn’t expected.
| const responsiveGridItem2 = { | ||
| width: '100%', | ||
|
|
||
| '@container (min-width: 600px)': { | ||
| width: '50%', | ||
| }, | ||
|
|
||
| '@container (min-width: 900px)': { | ||
| width: '25%', | ||
| }, | ||
|
|
||
| '@container (min-width: 1200px)': { | ||
| width: '20%', | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Same as above — we need to make sure this works correctly for all cases.
| const responsiveGridItem3 = { | ||
| width: '100%', | ||
|
|
||
| '@container (min-width: 600px)': { | ||
| width: '50%', | ||
| }, | ||
| '@container (min-width: 1200px)': { | ||
| width: '40%', | ||
| }, | ||
| }; |
| const responsiveGridItem1 = { | ||
| width: '100%', | ||
|
|
||
| '@container (min-width: 600px)': { | ||
| width: '50%', | ||
| }, | ||
|
|
||
| '@container (min-width: 900px)': { | ||
| width: '25%', | ||
| }, | ||
|
|
||
| '@container (min-width: 1200px)': { | ||
| width: '20%', | ||
| }, |
There was a problem hiding this comment.
Same here — for Templates, we’re also showing four cards, and with the current logic, it results in empty space on the right side.
…, OnboardingSection, and TemplateSection to use container queries instead of viewport media queries. Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
|
Screen.Recording.2026-02-23.at.2.40.08.PM.mov
|
3 participants
Hey, I just made a Pull Request!
Description
Fixes
UI Before Change
UI After Change
Screen.Recording.2026-02-18.at.12.33.04.PM.mov
🧩 Container Query Support for Grid
Added two files
useContainerQuery.tsin hooks andGridItem.tsin Utils for tracking the container width instead of tracking viewport width1️⃣
useContainerQueryA React hook that observes an element’s width using
ResizeObserverand returns a container breakpoint:xs | sm | md | lg | xl2️⃣
containerGridItemSxGenerates an MUI
sxobject for Grid items using CSS Container Queries.xs | sm | md | lg | xlcolumn props (1–12)@container (min-width: …)rules3️⃣
GridItems.tsGridItems.tsxcomposes the above utilities to provide a simple, container-aware Grid API.containerGridItemSxinternally✅ Result
✔️ Checklist